<template>
  <div class="garbage-detail">
    <div class="content-box">
      <div class=" font-18 font-w-8">
        <div class="text-center" v-if="type==1">可回收垃圾</div>
        <div class="text-center" v-if="type==2">有害垃圾</div>
        <div class="text-center" v-if="type==3">易腐垃圾</div>
        <div class="text-center" v-if="type==4">其它垃圾</div>
        <div class="class-content">
          <div class="font-16 font-w-4" v-if="type==1">
            <div class="item flex">
              <img src="../assets/img/11.png" alt="">
              <div>
                <div>别让资源变垃圾,</div>
                <div>分类回收是绝技</div>
                <div class="content color-black-7 font-14">
                  可回收物就是可以再生循环的垃圾。本身或材质可再利用的纸类、硬纸板、玻璃、塑料、金属、塑料包装，与这些材质有关的如：报纸、杂志、广告单及其它干净的纸类等皆可回收。</div>
              </div>
            </div>
            <br>
            <div>
              <p style="line-height:40px">可回收物投放要求</p>
              <div class=" font-14 color-black-7">
                <p>轻投轻放</p>
                <p>清洁干燥、避免污染，废纸尽量平整</p>
                <p>立体包装请清空内容物，清洁后压扁投放</p>
                <p>有尖锐边角的，应包裹后投放</p>
              </div>
            </div>
            <div class="img-box">
              <img src="../assets/img/111.jpg" alt="">
            </div>
          </div>
          <div class="font-16 font-w-4" v-if="type==2">
            <div class="item flex">
              <img src="../assets/img/22.png" alt="">
              <div class="content color-black-7 font-14">
                有害垃圾含有对人体健康有害的重金属、有毒的物质或者对环境造成现实危害或者潜在危害的废弃物。包括电池、荧光灯管、灯泡、水银温度计、油漆桶、部分家电、过期药品、过期化妆品等。这些垃圾一般使用单独回收或填埋处理。
              </div>
            </div>
            <br>
            <div>
              <p style="line-height:40px">有害垃圾投放要求</p>
              <div class=" font-14 color-black-7">
                <p>投放时请注意轻放</p>
                <p>易破损的请连带包装或包裹后轻放</p>
                <p>如易挥发，请密封后投放</p>
              </div>
            </div>
            <div class="img-box">
              <img src="../assets/img/222.jpg" alt="">
            </div>
          </div>
          <div class="font-16 font-w-4" v-if="type==3">
            <div class="item flex">
              <img src="../assets/img/33.png" alt="">
              <div class="content color-black-7 font-14">
                也称厨余垃圾（上海称湿垃圾）包括剩菜剩饭、骨头、菜根菜叶、果皮等食品类废物。经生物技术就地处理堆肥，每吨可生产0.6~0.7吨有机肥料。
              </div>
            </div>
            <br>
            <div>
              <p style="line-height:40px">易腐垃圾投放要求</p>
              <div class=" font-14 color-black-7">
                <p>纯流质的食物垃圾，如牛奶等，应直接倒进下水口</p>
                <p>有包装物的湿垃圾应将包装物去除后分类投放，包装物请投放到对应的可回收物或干垃圾容器</p>
              </div>
            </div>
            <div class="img-box">
              <img src="../assets/img/333.jpg" alt="">
            </div>
          </div>
          <div class="font-16 font-w-4" v-if="type==4">
            <div class="item flex">
              <img src="../assets/img/44.png" alt="">
              <div class="content color-black-7 font-14">
                （上海称干垃圾）包括除上述几类垃圾之外的砖瓦陶瓷、渣土、卫生间废纸、纸巾等难以回收的废弃物及尘土、食品袋（盒）。采取卫生填埋可有效减少对地下水、地表水、土壤及空气的污染。
              </div>
            </div>
            <br>
            <div>
              <p style="line-height:40px">其它垃圾投放要求</p>
              <div class=" font-14 color-black-7">
                <p>尽量沥干水分</p>
                <p>难以辨识类别的生活垃圾投入干垃圾容器内</p>
              </div>
            </div>
            <div class="img-box">
              <img src="../assets/img/444.jpg" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    type: {
      type: String,
      default: ""
    }
  }
};
</script>

<style lang="scss" scoped>
.garbage-detail {
  .text-center {
    text-align: center;
    line-height: 25px;
  }
  .content-box {
    margin: 0 15px 20px;
    padding: 20px 10px 20px;
    background-color: #fff;
    box-shadow: 0px 10px 10px 0px rgba(148, 174, 191, 0.3);
    border-radius: 4px;
    min-height: 200px;
    .class-content {
      justify-content: space-around;
      flex-wrap: wrap;
      .item {
        justify-content: space-around;
        margin-top: 10px;
        img {
          width: 80px;
          height: 170px;
        }
        .content {
          margin-top: 10px;
          max-width: calc(50vw);
        }
      }
      .img-box {
        padding: 20px 0;
        img {
          width: 100%;
        }
      }
    }
  }
}
</style>